<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>Hello World</div>
    <p class="wel">Hello World</p>
    <h1 id="w"> Hello</h1>
    <h4><span><input type="text" value="姓名"></span></h4>
    <div>Hello Vue</div>
</body>
<script>
    //标签选择器
    // let elem1=document.querySelector('div')
    // console.log(elem1)

    //类选择器
    let elem2=document.querySelector('.wel')
    console.log(elem2)

    //id选择器
    let elem3=document.querySelector('#w')
    console.log(elem3)

    let elem4=document.querySelector('h4 span input')
    console.log(elem4)

    //使用querySelectorAll
    let elem5=document.querySelectorAll('div')
    console.log(elem5)
</script>
</html>